<template>
<div>
  <div v-if="floorData && floorData.length === 0">
    <Form :inline="true" :model="floorForm" :label-width="40">
      <FormItem label="层数">
        <Input v-model="floorForm.floorNum"></Input>
      </FormItem>
      <FormItem label="户数">
        <Input v-model="floorForm.doorplateNum"></Input>
      </FormItem>
      <Button class="ml10" @click="createFloor" :loading="FloorButtonLoading">生成楼层</Button>
    </Form>
  </div>
  <div v-if="floorData && floorData.length !== 0">
    <div v-for="(item,index) in floorData" :key="index">
      <div style="margin:5px 0px">
        <span style="font-size: 25px">{{item.name}}F</span>
        <Button type="info"  size="small" class="ml10" @click="updateFloor(item)">修改层名称</Button>
        <Button type="primary" size="small" class="ml10" @click="addFloor(item,floorData[index+1])">插入一层</Button>
        <Button type="error" size="small" class="ml10" @click="deleteModalT(item)">删除该层</Button>
        <Button type="primary" size="small" class="ml10" @click="addDoorplate(item)">添加一户</Button>
        <ButtonGroup class="ml10">
          <Button type="info" size="small" :disabled="index===0" @click="upFloor(item,index,floorData)">
            <Icon type="ios-arrow-up"></Icon>
            上移
          </Button>
          <Button type="info" size="small" :disabled="index === floorData.length - 1" @click="downFloor(item,index,floorData)">
            下移
            <Icon type="ios-arrow-down"></Icon>
          </Button>
        </ButtonGroup>
      </div>
      <div>
        <Row>
          <div v-for="(item1,index1) in item.children" :key="index1">
            <Col span="8" style="margin:5px 0px">
              <div>
                <template>
                  <div v-if="item1.doorplateShow">
                    <Row>
                      <Col span="19">
                        <div @dblclick="item1.doorplateShow = false">
                          <Input style="width: 95%" readonly v-model="item1.name">
                            <span slot="prepend">{{choiceInfo.name}}-{{item.name}}-</span>
                          </Input>
                        </div>
                      </Col>
<!--                      <Col span="4" style="text-align: center;line-height: 32px">-->
<!--                        <Button size="small" type="success" @click="clickRemarks(item1)">备注</Button>-->
<!--                      </Col>-->
                    </Row>
                  </div>
                  <div v-if="!item1.doorplateShow">
                    <Input style="width: 80%" v-model="item1.name">
                      <span slot="prepend">{{choiceInfo.name}}-{{item.name}}-</span>
                    </Input>
                  </div>
                  <div v-if="!item1.doorplateShow" style="margin-top: 10px">
                    <ButtonGroup>
                      <Button class="buttonGroupB" @click="updateDoorplate(item1)">
                        <Icon type="md-checkmark"></Icon>
                      </Button>
                      <Button class="buttonGroupB" @click="item1.doorplateShow = true">
                        <Icon type="md-close"></Icon>
                      </Button>
                      <Button class="buttonGroupB" @click="deleteDoorplateT(item1)">
                        <Icon type="md-trash"></Icon>
                      </Button>
                    </ButtonGroup>
                  </div>
                </template>
              </div>
            </Col>
          </div>
        </Row>
      </div>
    </div>
  </div>
  <Modal v-model="FloorModal" title="楼层信息" @on-ok="FloorOK">
    <Row style="margin-bottom: 10px">
      <Col span="5" style="text-align: right;line-height: 35px">名称:</Col>
      <Col span="13" offset="1">
        <Input v-model="FloorInfo.name">
          <span slot="append">F</span>
        </Input>
      </Col>
    </Row>
  </Modal>
  <Modal v-model="DoorplateModal" title="户信息" @on-ok="DoorplateOk">
    <Row style="margin-bottom: 10px">
      <Col span="5" style="text-align: right;line-height: 35px">名称:</Col>
      <Col span="13" offset="1">
        <Input v-model="DoorplateInfo.name"></Input>
      </Col>
    </Row>
  </Modal>
  <Modal
    v-model="deleteModal"
    title="删除删除该层信息"
    @on-ok="deleteFloor(deleteModalInfo)">
    <Form :label-width="80" :rules="ruleValidate">
      <FormItem label="删除原因" prop="desc">
        <Input v-model="deleteModalInfo.note" type="textarea" :rows="4" placeholder="请填写删除原因" />
      </FormItem>
    </Form>
  </Modal>
  <Modal
    v-model="deleteDoorplate"
    title="删除信息"
    @on-ok="deleteDoorplateD(deleteDoorplateInfo)">
    <Form :label-width="80" :rules="ruleValidate">
      <FormItem label="删除原因" prop="desc">
        <Input v-model="deleteDoorplateInfo.note" type="textarea" :rows="4" placeholder="请填写删除原因" />
      </FormItem>
    </Form>
  </Modal>
</div>
</template>

<script>
import { createFloorDoorplateNew, createFloorNew } from '../../../../api/z-new-grid'
import { deleteGridInfo, updateDoorplate, updateFloor, updateFloorSort } from '../../../../api/eventlist'

export default {
  name: 'doorplateLevelInfo',
  props: {
    choiceInfo: {
      type: Object
    },
    floorData: {
      type: Array
    }
  },
  data () {
    return {
      data: [],
      floorForm: {},
      FloorButtonLoading: false,
      FloorModal: false,
      FloorInfo: {},
      DoorplateModal: false,
      DoorplateInfo: {},
      deleteModal: false,
      deleteModalInfo: {},
      deleteDoorplate: false,
      deleteDoorplateInfo: {},
      sort: 0,
      ruleValidate: {
        desc: [
          { required: true, message: '删除原因不可为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    createFloor () {
      this.FloorButtonLoading = true
      let data = this.floorForm
      data.unit_id = this.choiceInfo.id
      createFloorNew(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({
            title: '创建成功',
            desc: ret.data.errmsg
          })
          this.FloorButtonLoading = false
          this.floorForm.floorNum = ''
          this.floorForm.doorplateNum = ''
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    addFloor (e1, e2) {
      console.log(e1, e2)
      this.sort = 0
      this.FloorInfo = {}
      if (e2 === undefined) {
        this.sort = e1.sort + 10000
      } else {
        this.sort = (e1.sort + e2.sort) / 2
      }
      this.FloorModal = true
    },
    updateFloor (e) {
      this.FloorModal = true
      this.FloorInfo = e
    },
    FloorOK () {
      if (this.FloorInfo.id === undefined) {
        // 新增
        let data = {
          unit_id: this.choiceInfo.id, // 上级id
          name: this.FloorInfo.name,
          type: 'floor',
          sort: this.sort,
          grade: '9'
        }
        this.createFloorDoorplate(data)
      } else {
        // 修改
        let data = {
          id: this.FloorInfo.id,
          name: this.FloorInfo.name,
          sort: this.FloorInfo.sort
        }
        updateFloor(data).then(ret => {
          if (ret.data.errcode === 0) {
            this.$Notice.success({ title: '修改成功', desc: ret.data.errmsg })
            this.reloadFloorData()
          } else {
            this.$Notice.error({
              title: '修改失败',
              desc: ret.data.errmsg
            })
          }
        })
      }
    },
    deleteModalT (e) {
      this.deleteModal = true
      this.deleteModalInfo = {}
      this.deleteModalInfo = e
    },
    deleteFloor (e) {
      let data = {
        id: e.id,
        grade: e.grade,
        note: e.note
      }
      if (data.note === '' || data.note === null || data.note === undefined) {
        this.$Notice.error({ title: '删除用户网格信息失败，删除原因不能为空', desc: '' })
      } else {
        deleteGridInfo(data).then(ret => {
          if (ret.data.errcode === 0) {
            this.$Notice.success({ title: '删除成功', desc: ret.data.errmsg })
            this.reloadFloorData()
            e.note = ''
          } else {
            this.$Notice.error({ title: '删除失败', desc: ret.data.errmsg })
          }
        })
      }
    },
    addDoorplate (e) {
      this.DoorplateInfo = {}
      this.DoorplateModal = true
      this.FloorInfo = e
    },
    updateDoorplate (e) {
      let data = {
        id: e.id,
        name: e.name,
        sort: e.sort
      }
      updateDoorplate(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '修改成功', desc: ret.data.errmsg })
          this.reloadFloorData()
        } else {
          this.$Notice.error({ title: '修改失败', desc: ret.data.errmsg })
        }
      })
    },
    DoorplateOk () {
      let data = {}
      if (this.FloorInfo.children.length === 0) {
        data = {
          floor_id: this.FloorInfo.id, // 层id
          name: this.DoorplateInfo.name,
          type: 'doorplate',
          sort: 100,
          grade: '10'
        }
      } else {
        data = {
          floor_id: this.FloorInfo.id, // 层id
          name: this.DoorplateInfo.name,
          type: 'doorplate',
          sort: this.FloorInfo.children[this.FloorInfo.children.length - 1].sort + 100,
          grade: '10'
        }
      }
      this.createFloorDoorplate(data)
    },
    deleteDoorplateT (e) {
      this.deleteDoorplate = true
      this.deleteDoorplateInfo = {}
      this.deleteDoorplateInfo = e
    },
    deleteDoorplateD (e) {
      let data = {
        id: e.id,
        grade: e.grade,
        note: e.note
      }
      if (data.note === '' || data.note === null || data.note === undefined) {
        this.$Notice.error({ title: '删除用户网格信息失败，删除原因不能为空', desc: '' })
      } else {
        deleteGridInfo(data).then(ret => {
          if (ret.data.errcode === 0) {
            this.$Notice.success({ title: '修改成功', desc: ret.data.errmsg })
            this.reloadFloorData()
          } else {
            this.$Notice.error({ title: '修改失败', desc: ret.data.errmsg })
          }
        })
      }
    },
    createFloorDoorplate (e) {
      createFloorDoorplateNew(e).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '创建成功！', desc: ret.data.errmsg })
          this.reloadFloorData()
        } else {
          this.$Notice.error({ title: '创建失败！', desc: ret.data.errmsg })
        }
      })
    },
    upFloor (e, e1, e2) {
      let data = {
        id1: e.id, // 本行
        id2: e2[e1 - 1].id// 上一行id
      }
      updateFloorSort(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '修改成功', desc: ret.data.errmsg })
          this.reloadFloorData()
        } else {
          this.$Notice.error({ title: '修改失败', desc: ret.data.errmsg })
        }
      })
    },
    downFloor (e, e1, e2) {
      let data = {
        id1: e.id, // 本行
        id2: e2[e1 + 1].id// 下一行id
      }
      updateFloorSort(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '修改成功', desc: ret.data.errmsg })
          this.reloadFloorData()
        } else {
          this.$Notice.error({ title: '修改失败', desc: ret.data.errmsg })
        }
      })
    },
    clickRemarks (e) {

    },
    reloadFloorData () {
      this.$emit('reloadData')
    }
  }
}
</script>

<style scoped>
.ml10 {
  margin-left: 10px;
}
.buttonGroupB{
  margin-right: 5px;
}
</style>
